
<template>
  <div class="home-container">
    <div class="menu-grid" :style="{ '--columns': columns }">
      <div 
        v-for="(item, index) in menuItems" 
        :key="index" 
        class="menu-item"
        @click="selectItem(item)"
      >
        <img :src="item.image" :alt="item.name" class="menu-image">
        <div class="menu-overlay">
          <h3>{{ item.name }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sc from '@/assets/images/sc.png';
import pr from '@/assets/images/pr.png';
import cf from '@/assets/images/cf.png';
import ry from '@/assets/images/ry.png';
import shu from '@/assets/images/shu.png';

export default {
  name: 'HomePage',
  data() {
    return {
      columns: 5,
      menuItems: [
        {
          name: '食材管理',
          description: '食材',
          image: sc,
          path: '/canteen/food'
        },
        {
          name: '明厨亮灶',
          description: '明厨亮灶',
          image: cf,
          path: '/canteen/certificates'
        },
        {
          name: '烹饪管理',
          description: '烹饪',
          image: pr,
          path: '/canteen/cooking'
        },
        {
          name: '从业人员',
          description: '从业人员',
          image: ry,
          path: '/canteen/employee'
        },
        {
          name: '证书管理',
          description: '查看证书',
          image: shu,
          path: '/canteen/certificates'
        }
      ]
    }
  },
  methods: {
    selectItem(item) {
      this.$router.push(item.path);
    }
  }
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: 20px;
}

.menu-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
}

.menu-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.menu-item:hover .menu-image {
  transform: scale(1.05);
}

.menu-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 15px;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.menu-item:hover .menu-overlay {
  transform: translateY(0);
}
</style>
